<template>
  <el-container>
    <el-aside :width="isCollapse?'64px':'208px'" style="overflow: hidden;">
      <el-menu :collapse="isCollapse" :collapse-transition="false"
               active-text-color="#ff0" background-color="#3c82f5"
               router style="width: 100%;height: 100vh;" text-color="#fff"
               unique-opened @select="handleSelect">
        <el-row style="padding-top: 10px;display: flex;align-items: center;">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px;">
            <el-avatar>
              <img alt="" height="35px" src="/imgs/login/logo2.png" width="35px">
            </el-avatar>
          </el-col>
          <el-col :span="isCollapse? 0 : 13">
            <span style="color:#fff;font-weight: bold;">快玩游戏</span>
          </el-col>
        </el-row>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px;">
              <Tickets/>
            </el-icon>
            <span>订单管理</span>
          </template>
          <el-menu-item index="/merchant/order">订单列表</el-menu-item>
          <el-menu-item index="/merchant/orderEvaluation">订单评价</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px">
              <House/>
            </el-icon>
            <span>房间管理</span>
          </template>
          <el-menu-item index="/merchant/room">房间列表</el-menu-item>
          <el-menu-item index="/merchant/roomSchedule">房间排班</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px">
              <UserFilled/>
            </el-icon>
            <span>陪玩管理</span>
          </template>
          <el-menu-item index="/merchant/escort">陪玩列表</el-menu-item>
          <el-menu-item index="/merchant/escortSchedule">陪玩排班</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px">
              <Shop/>
            </el-icon>
            <span>商店管理</span>
          </template>
          <el-menu-item index="/merchant/info">商家管理</el-menu-item>
          <el-menu-item index="/merchant/shop">店家管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header height="10vh" style="padding-top: 22px; background-color: #fff">
        <el-row :gutter="10">
          <el-col :span="10">
            <el-icon style="font-size: 20px" @click="changeCollapse">
              <Expand/>
            </el-icon>
          </el-col>
          <el-col :span="8">
            <span style="font-size: 22px;font-weight: bold;color: #3c82f5;">
                {{ merchant.name || null }}
            </span>
          </el-col>
          <el-col :span="6" style="position:relative;">
            <el-dropdown style="position: absolute;right: 20px" trigger="click">
              <span style="font-size: 19px;font-weight: bold;">
                {{ user.username }}
                <el-icon><arrow-down/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!--        面包屑导航-->
        <el-breadcrumb separator="/" style="position: relative;top: 20px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="height: 90vh;padding: 0;overflow-y: auto;">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {House, Paperclip, UserFilled} from "@element-plus/icons-vue";

const isCollapse = ref(false);
const merchant = ref({});
const handleSelect = (index, indexPath) => {
  console.log(index);
}
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
}
const user = ref(getUser());
const logout = () => {
  if (confirm('您确认要退出登录吗？')) {
    localStorage.removeItem('user');
    localStorage.removeItem('jwtToken');
    user.value = '';
    window.location.href = '/login';
  }
}
let map = {
  '/order': ['订单管理', '订单列表'],
  '/orderEvaluation': ['订单管理', '订单评价'],
  '/room': ['房间管理', '房间列表'],
  '/roomSchedule': ['房间管理', '房间排班'],
  '/escort': ['陪玩管理', '陪玩列表'],
  '/escortSchedule': ['陪玩管理', '陪玩排班'],
  '/shop': ['商店管理', '店家管理'],
  '/info': ['商店管理', '商家管理'],
}
const breadcrumb = ref(map['/user']);
const route = useRoute();
const updateBreadcrumb = (route) => {
  const path = route.path.replace('/merchant/','/');
  breadcrumb.value = map[path];
}
onMounted(() => {
  updateBreadcrumb(route);
  getMerchant(merchant);
});

const router = useRouter();
router.beforeEach((to, from, next) => {
  updateBreadcrumb(to);
  next();
});

</script>
